<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>dynamicPPT</title>
        <link rel="stylesheet" href="../css/reset.css" />
        <style>
            .page{
                width:700px;
                height:600px;
                border-radius:5px;
                line-height:500px;
                position:fixed;
                top:50%;
                left:50%;
                margin:-250px 0 0 -250px;
                transition:all .5s ease-in-out 0s;
            }
            .page .codeNote{
                transition:all .5s ease-in-out 0s;
                font-size:40px;
            }
            .svg{
                position:fixed ;
                width:500px;
                height:500px;
                right:10px;
                top:10px;
                background-color:#fff;
                box-shadow:0 0 5px rgba(0,0,0,.2) ;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" src="../script/d3.min.js" ></script>
        <script type="text/javascript" src="../script/write.js"></script>
        <script type="text/javascript" src="../script/parse.js"></script>
        <script type="text/tmpl" id="tmpl" >
            这是一个d3的教程
            !#.page{
            !#    left:1%;
            !#    top:1%;
            !#    font-size:16px;
            !#    line-height:2em;
            !#    margin:0;
            !#    text-indent:10px;
            !#    border:1px solid rgba(0,0,0,.2) ;
            !#    text-align:left;
            !#}
            !#.page .codeNote{
            !#    font-size:12px;
            !#}
            首先你要先引入d3的库，可以访问d3.org进行下载
            下面举个例子，来说明d3是怎么工作的


            d3提供了自身的选择器，这里先选择body元素，然后在里面创建一个svg
            ~var svg = d3.selectAll('body').append('svg') ;
            ~svg.attr({
            ~   width : 500 ,
            ~   height : 500 ,
            ~   class : 'svg'
            ~}) ;
            在右边就有了一个svg,样式在这里
            !.svg{
            !    position:fixed ;
            !    width:500px;
            !    height:500px;
            !    right:10px;
            !    top:10px;
            !    background-color:#fff;
            !    box-shadow:0 0 5px rgba(0,0,0,.4) ;
            !}

            换个板子我们继续说 , loading......

            ~#var page2 = document.createElement('div') ;
            ~#page2.id = 'page2' ;
            ~#page2.className = 'page' ;page2.style.left = '100px';page2.style.top = '50px' ;page2.style.backgroundColor='#fff';
            ~#body.appendChild(page2) ;
            ~#parse.setDom(page2) ;
            d3自称为数据驱动的库，是围绕着数据进行编程的
            这里我们先造些数据
            ~var list = [80,50,95,100] ;
            然后在svg里添加几个rect,然后和list里绑定
            ~var rect = svg.selectAll('rect').data(list).enter().append('rect') ;
            绑定了之后，每个rect就可以访问和自己绑定的数据，然后呈现
            ~rect.each(function(d,i){
            ~    var me = d3.select(this) ;
            ~    me.attr({ width : 0 , height : 50 , x : 10 , y : 10 + i*70 }) ;
            ~    me.transition().duration(1500).attr({ width : d * 3 }) ;
            ~}) ;
            这样一个简单的图表就弄好了,颜色什么的就不要吐槽了
            好了，教程1就先说到这里
            诶，是不是还想看一下第一个板子的内容，贴心如我怎么会想不到呢
            ~#page2.style.left = '420px' ;
            ~#page2.style.top = '250px' ;
            搞定，the end....................

        </script>
        <div class="page" id="main"></div>

        <script type="text/javascript">

                var parse = new window.dynamic.Parse( document.getElementById('main') ) ;
                parse.push(document.getElementById('tmpl').innerHTML) ;
                var body = document.body ;
                //parse.index = 14 ;
        </script>
    </body>
</html>